{% load humanize %}
{% load display_tags %}
{% load authorization_tags %}
<div class="panel panel-default table-responsive">
    <div class="panel-heading">
        <h4>Notes <span class="pull-right"><a data-toggle="collapse" href="#vuln_notes"><i
                class="glyphicon glyphicon-chevron-up"></i></a></span></h4>
    </div>
    {% if object|has_object_permission:"Note_Add" %}
    <div id="vuln_notes" class="panel-body collapse in">
      <form class="form-horizontal" action="" method="post">{% csrf_token %}
          {% include "dojo/form_fields.html" with form=form %}
          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                  <input class="btn btn-secondary" label="Add Note" type="submit" id="add_note" value="Add Note"/>
              </div>
          </div>
      </form>
    </div>
    {% endif %}
</div>
{% for note in notes %}
  <div>
    <div class="panel panel-default">
      <div class="panel-comments">
        {% if user.username == note.author.username or object|has_object_permission:"Note_Delete" or user.is_superuser %}
          <div class="pull-right">
            <form method="post" action="{% url 'delete_note' note.id destination object.id %}">
                {% csrf_token %}
                <input type="hidden" aria-label="id" name="id" value="{{note.id}}" id="id_id" />
                <button type="submit" aria-label="Delete Note" class="btn-delete">
                  <i class="fa-solid fa-trash"></i>
                </button>
            </form>
          </div>
          {% endif %}
          {% if user.username == note.author.username or object|has_object_permission:"Note_Edit" %}
          <div class="pull-right">
            <form method="get" action="{% url 'edit_note' note.id destination object.id %}">
                {% csrf_token %}
                <input type="hidden" aria-label="id" name="id" value="{{note.id}}" id="id_id" />
                <button type="submit" aria-label="Edit Note" class="btn-edit">
                  <i class="fa-solid fa-pen-to-square"></i>
                </button>
            </form>
          </div>
          {% endif %}
          {% if user.username == note.author.username or object|has_object_permission:"Note_View_History" %}
          <div class="pull-right">
            <form method="get" action="{% url 'note_history' note.id destination object.id %}">
                {% csrf_token %}
                <input type="hidden" aria-label="id" name="id" value="{{note.id}}" id="id_id" />
                <button type="submit" aria-label="history" class="btn-history">
                  <i class="fa-solid fa-clock-rotate-left"></i>
                </button>
            </form>
          </div>
          {% endif %}

          <div class="row-sm-2">
            <strong>{{ note.author }}</strong>
            <span class="text-muted">commented {{ note.date }}</span>
          </div>
          {% if note.edited %}
            <div class="row-sm-2">
              <strong>{{ note.editor }}</strong>
              <span class="text-muted">edited {{ note.edit_time }}</span>
            </div>
          {% endif %}
          {% if note.private %}
            <div class="row-sm-2">
              <span class="text-muted">(will not appear in report)</span>
            </div>
          {% endif %}
      </div>
      <div class="panel-body">
        {% if note.note_type != None %}
          <strong>Note type : {{ note.note_type }}</strong>
          <br><br>
        {% endif %}
        {{ note|linebreaks }}
      </div>
    </div>
  </div>
{% endfor %}
